<template>
    <div class="page-container page-customerManage">
        <div class="operations3">
            <div class="operation-btns">
                <div v-if="activityType != 0" @click="exportToExcel">全部导出</div>
            </div>
            <div class="search-user">
                <el-input v-model="companyName" class="search-input" placeholder="企业名称" style="width: 200px;"></el-input>
                <el-input v-model="name" class="search-input" placeholder="管理员名称" style="width: 120px;"></el-input>
                <el-input v-model="phone" class="search-input" placeholder="管理员电话" style="width: 120px;"></el-input>
                <div class="search-btn" @click="search">查询</div>
            </div>
        </div>
        <el-tabs v-model="activityType" style="margin-left: 10px;" @tab-click="handleClick">
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <el-tab-pane label="使用时长" name="1"></el-tab-pane>
            <el-tab-pane label="使用人数" name="2"></el-tab-pane>
            <el-tab-pane label="短视频" name="3"></el-tab-pane>
        </el-tabs>
        <div class="company-manager">
            <el-table :data="orderList" border tooltip-effect="dark" style="width: 100%;"
                @selection-change="handleSelectionChange">
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column prop="companyName" align="center" label="企业名称"></el-table-column>
                <el-table-column prop="duration" align="center" label="使用时长购买数/年">
                    <template slot-scope="scope">
                        <div>{{ scope.row.durationTime ? scope.row.durationTime : scope.row.activityType == 1 ?
                            scope.row.duration : '/' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="duration" align="center" label="使用人数购买数/位">
                    <template slot-scope="scope">
                        <div>{{ scope.row.cardNumber ? scope.row.cardNumber : scope.row.activityType == 2 ?
                            scope.row.duration : '/' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="duration" align="center" label="短视频购买数/次">
                    <template slot-scope="scope">
                        <div>{{ scope.row.videoSize ? scope.row.videoSize : scope.row.activityType == 3 ? scope.row.duration
                            : '/' }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="管理员名称" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.name }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="phoneNum" align="center" label="联系电话"></el-table-column>
                <el-table-column v-if="activityType != 0" label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <el-button class="checkCard" @click="checkCard(scope.row)" type="text" style="color: #51cdcb;"
                                size="medium">详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                    :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { queryActivityOrderPage } from '@/api/api.js';
import { getCookie } from '@/utils/util.js';
import { serverUrl } from "@/utils/server.js";

const Qs = require('qs');
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            orderList: [],
            total: 0,
            pageNum: 1,
            activityType: '0',
            companyName: '',
            phone: '',
            name: '',
        };
    },
    created() {
        this.getOrderList();
    },
    mounted() {
    },
    methods: {
        getOrderList() {
            let params = {
                pageNum: this.pageNum,
                companyName: this.companyName,
                phone: this.phone,
                name: this.name
            }
            if (this.activityType != "0") {
                params.activityType = this.activityType;
            }
            queryActivityOrderPage(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.orderList = res.data.pageInfo.list;
                } else {
                    this.orderList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.orderList = [];
            })
        },
        // 页面切换
        handleClick(tab, event) {
            this.pageNum = 1
            this.searchKey = ''
            this.lastSearchKey = ''
            this.orderList = []
            this.getOrderList();
        },
        search() {
            this.getOrderList();
        },
        handleCurrentChange() {
            this.getOrderList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        checkCard(row) {
            sessionStorage.setItem("orderDetail", JSON.stringify(row))
            this.$router.push({ path: "/orderDetail" });
        },
        // 导出
        exportToExcel() {
            let params = {
                activityType: this.activityType,
                companyName: this.companyName,
                phone: this.phone,
                name: this.name
            }
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'activity/exportActivityOrder', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res => {
                return res.blob();
            }).then(res => {
                let link = document.createElement('a');
                let url = window.URL.createObjectURL(res);
                link.href = url;
                link.download = '订单列表.xls';
                link.click();
                window.URL.revokeObjectURL
            });
        }
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .refresh-btn {
        z-index: 999;
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        height: 32px;
        width: 68px;
        cursor: pointer;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        background: #51CDCB;
        position: absolute;
    }
    .el-tabs__item {
        height: 74px;
        line-height: 74px;
    }
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .operations3 {
        position: absolute;
        top: 20px;
        right: 10px;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .operation-btns {
            display: flex;
            div {
                border-radius: 4px;
                background: #51CDCB;
                font-size: 14px;
                line-height: 40px;
                height: 40px;
                color: #fff;
                padding: 0 20px;
                margin-right: 10px;
                cursor: pointer;
            }
            .disabled {
                background: #B9EBEA;
            }
        }
        .search-user {
            display: flex;
            .search-input {
                height: 40px;
                margin-right: 10px;
                .el-input__inner {
                    height: 40px;
                }
            }
            .search-btn {
                border-radius: 4px;
                background: #51CDCB;
                font-size: 14px;
                line-height: 40px;
                height: 40px;
                color: #fff;
                padding: 0 20px;
                cursor: pointer;
            }
            .disabled {
                background: #B9EBEA;
            }
        }
    }
    .company-manager {
        padding: 0 20px;
    }
    .customer-manage-dialog {
        .el-dialog {
            width: 450px;
            .el-dialog__header {
                text-align: center;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
            .w240 {
                width: 240px;
            }
        }
    }
}
</style>
